<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/constrant.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="${ctxStatic }/mui/css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" href="${ctxStatic }/wx/css/day_cars.css" />
<script src="${ctxStatic }/wx/mui/js/mui.min.js"></script>
<script type="text/javascript" src="${ctxStatic }/zepto/zepto.min.js" ></script>
	<style>
		html,
		body {
			height: 100%;
			background: #F5F5F5;
		}
		a:active {
			color: #fff !important;
		}
	</style>
</head>
<body>
		<div id="days_models">
			<form id="queryForm" class="mui-input-group" method="post" action="${ctxWx}/air/airlist">
			<input id="pageNo" name="pageNo" type="hidden" value="1"/>
			<input id="pageSize" name="pageSize" type="hidden" value="100"/>
			<input type="hidden" name="rentType" value="6"/>
			<input type="hidden" name="tstyle"  id="tsy"/>
			<input type="hidden" name="mapkm" value="${tRentproduct.mapkm }" id="mapkm"/>
			<input type="hidden" name="mes" value="${tRentproduct.remarks }" id="mes"/>
			<input type="hidden" name="aboardAddress" value="${tRentproduct.aboardAddress }" id="aboardAddress"/>
			<input type="hidden" name="departcity.sitename" value="${tRentproduct.departcity.sitename }" >
			<input type="hidden" name="departcity.siteid" value="${tRentproduct.departcity.siteid }">
			<input type="hidden" name="destcity.sitename" value="${tRentproduct.destcity.sitename }">
			<input name="fromdateStr" type="hidden" value="${tRentproduct.fromdateStr}"/>
			<input type="hidden" name="tabType" value="${tRentproduct.tabType}" />
			<input type="hidden" name="typ"  id="typ"/>
			<div class="mui-navbar-inner mui-bar mui-bar-nav" style="background: #16C59B;">
				<button type="button" id="back" class="mui-left  mui-btn  mui-btn-link mui-btn-nav mui-pull-left" style="color: #fff;">
					<span class="mui-icon mui-icon-left-nav"  style="color: #fff;"></span>
				</button>
				<h1 class="mui-center mui-title" style="color: #fff;">选择车型</h1>
				<a class="screen">筛选</a>
				<div class="screen_box">
					<ul>
						<li class="sereen_ico"></li>
						<li class="sereen_ii" value="">不限</li>
						<li class="sereen_ii" value="swc">6座商务车</li>
						<li class="sereen_ii" value="xb">14座以下小巴</li>
						<li class="sereen_ii" value="zb">24座以下中巴</li>
						<li class="sereen_ii" value="db">25座以上大巴</li>
					</ul>
				</div>
			</div>
			<div class="mui-content">
				<div class="days_models_wrap">
					<ul class="mui-table-view">
				 <c:if test="${not empty cargotypeList }">
				 <c:forEach items="${page.list }" var="index">
						<li class="mui-table-view-cell models_boxs">
							<div class="mui-row models_is">
								<div class="mui-col-xs-3 modl_b_img">
									<img src="https://www.xiakeyueche.com${index.cargotype.images }" style="width: 100%;" />
								</div>
								<div class="mui-col-xs-9" style="padding-left: 15px;">
									 <div class="cars_type">
										<p>${index.cargotype.typename }</p>
										<div class="type_costs">
											<span class="cars_m_cost">￥<fmt:formatNumber type="number" value="${index.lowestAirPrice}" pattern="0" maxFractionDigits="0"/>起</span>
											<span class="cars_m_icos m_rodate">
				 	  	 	                     <i class="mui-icon mui-icon-arrowdown"></i>
				 	  	 	               </span>
				 	  	 	            </div>
				 	  	 	         </div>
				 	  	 	         <div class="cars_t_exp">
										 <span class="cars_exp_ico">
										     <img src="${ctxStatic }/wx/img/day_img/renshu_xuanzecheixng@1x.png" />
				 	  	 	             </span>
										 <span class="cars_unit">${index.cargotype.seats }人</span>
										 <span class="cars_exp_ico">
											<img src="${ctxStatic }/wx/img/day_img/jianshu_xuanzechexing@1x.png" />
				 	  	 	             </span>
										 <span class="cars_unit">${index.cargotype.packs }件</span>
									</div>
									 <p class="models_txt">${index.cargotype.typedesc }</p>
				 	  	 	       </div>
								</div>	
								<c:forEach items="${index.officeList }" var="office" >				
							<div class="models_oi mui-row">
								   <div class="mui-col-xs-9">
										<p class="mod_oi_tit">${office.abbr }  </p>
										<p><c:if test="${office.iswifi == '1' }">无线wifi</c:if>
							<c:if test="${office.powersupply == '1' }">车载充电</c:if>
							<c:if test="${office.tablewater == '1' }">免费饮用水</c:if>
							<c:if test="${office.businesssuit == '1' }">商务正装</c:if>
							<c:if test="${office.paper == '1' }">免费纸巾</c:if></p>
									</div>
									<div class="mui-col-xs-3">
										<p class="day_mi_cost">￥
							<fmt:formatNumber type="number" value="${office.airPrice }" pattern="0" maxFractionDigits="0"/>
							</p>
										<p class="md_reserve">
											<a href="javascript:window.location.href=
								'${ctxWx}/air/airbooking?type='+$('#typ').val()+'
								&departcity.sitename=${tRentproduct.departcity.sitename }&destcity.sitename=${tRentproduct.destcity.sitename }&productname=${tRentproduct.productname }
								&office.name=${office.name }&office.iswifi=${office.iswifi }&office.businesssuit=${office.businesssuit }&office.paper=${office.paper }&office.abbr=${office.abbr }&cargotype.outtimefee=${index.cargotype.outtimefee }
								&cargotype.cargotypeid=${index.cargotype.cargotypeid }&cargotype.images=${index.cargotype.images }&tabType=${tRentproduct.tabType}&fromdateStr=${tRentproduct.fromdateStr }&office.airPrice=${office.airPrice }
								&office.powersupply=${office.powersupply }&office.tablewater=${office.tablewater }&aboardAddress=${tRentproduct.aboardAddress }
								&cargotype.typedesc=${index.cargotype.typedesc }&cargotype.typename=${index.cargotype.typename  }'" >预定</a>
										</p>
									</div>
							</div>
							</c:forEach>
						</li>
						</c:forEach>
						  </c:if>
					</ul>
					</div>
				</div>
				</form>
			</div>
			<script>
				Zepto(function() {
					if(isWeiXin()){ //微信打开
						//提交
					} else{
						$('#typ').val("notwx");
					}
					$('.screen').on('tap', function() {
						$('.screen_box').toggle();
					});
					$('.sereen_ii').on('tap', function(){
						$('.screen_box').hide();
						$("#tsy").val($(this).attr("value"));
						$('#queryForm').submit();
					});
					$('.models_is').on('tap', function() {
						$(this).siblings('.models_oi').toggle().parent().siblings().children('.models_oi').hide();
						$(this).parent().addClass('model_box_g').siblings().removeClass('model_box_g');
                       var rodate=$(this).find('.cars_m_icos');
                       if(!rodate.hasClass('m_rodate')){
                        	rodate.addClass('m_rodate')
                        }else{
                        	rodate.removeClass('m_rodate')
                        }
					});
					$('#back').on('tap', function(){
						window.location.href = '${ctxWx}/pu/airIndex';
					});
					var cargotypeList = "${cargotypeList}";
					if(cargotypeList.length==0){
						mui.alert("暂无可用车辆",function(){
							window.location.href = '${ctxWx}/pu/airIndex';
						});
					}
				})
				function isWeiXin(){ 
					var ua = window.navigator.userAgent.toLowerCase(); 
						if (ua.match(/MicroMessenger/i) == 'micromessenger') { 
							return true;
						} else { 
							return false;
						} 
				} 
			</script>
	</body>
</html>